<template>
  <div class="fetch-demo">
    <h1>fetch-demo</h1>
    <ElButton type="primary" @click="getCategories">点击</ElButton>
    <ElButton type="success" @click="debounceCategories">点debounce击</ElButton>
    <div>
      <div v-for="item in categoriesList" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElHeader, ElMain, ElFooter, ElButton } from 'element-plus';
import { categories } from '../api/api';
import { debounce } from '../utils/debounce';
const categoriesList = ref([])
const getCategories = () => {
  const params = {}
  categories(params).then(res => {
    console.log("getCategories", res)
    categoriesList.value = res.data
  })
}
const debounceCategories = debounce(() => {
  getCategories()
}, 500)
onMounted(() => {
  getCategories()
});

</script>

<style scoped>
/* 样式内容 */
</style>